<!--#include file="common/header.html"-->
<link rel="stylesheet" type="text/css" href="../css/autocomplete.css" media="all">
<body>
    <div class="container-fluid larry-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <!--头部搜索-->
                <section class="panel panel-padding">
                    <form class="layui-form" action="/education/admin/orderItem">
                        <input type="hidden" name="_query.orderId" id="qOrderId">
                        <div class="layui-form">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input class="layui-input" name="_query.keyword" placeholder="关键字">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button lay-submit class="layui-btn" lay-filter="search" id="search">查找</button>
                            </div>
                        </div>
                    </form>
                </section>

                <!--列表-->
                <section class="panel panel-padding">
                    <div class="group-button">
                       <!-- <button class="layui-btn layui-btn-small" onclick="_add();">
                            <i class="iconfont">&#xe649;</i> 添加
                        </button>-->
                        <button class="layui-btn layui-btn-small layui-btn-danger ajax-all" data-name="checkbox" data-params='{"url": "/education/admin/orderItem/delete"}'>
                            <i class="iconfont">&#xe626;</i> 删除
                        </button>
                    </div>
                    <div id="list" class="layui-form"></div>

                    <div class="text-right" id="page"></div>
                </section>
            </div>
        </div>
    </div>
    <div class="add-subcat">
        <form class="layui-form layui-form-pane" action="/education/admin/orderItem/save" id="form1">
            <input type="hidden" name="id">
            <input type="hidden" name="product_id" id="pid">
            <input type="hidden" name="order_id" id="orderId">

            <div class="layui-form-item">
                <label class="layui-form-label">产品编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="product_no" placeholder="请输入产品编号" id="autocompleteInput"
                           autocomplete="false" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="product_price" type="text" required jq-verify="required"
                          id="price" autocomplete="false" jq-error="必须">
                </div>
            </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="amount" type="number" required jq-verify="required"
                           autocomplete="false" jq-error="必须为数字">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" onclick="submitForm();">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</body>
<script id="list-tpl" type="text/html"
        data-params='{"url":"/education/admin/orderItem","dataName":"productCommentData","pageid":"#page", "method":"post"}'>
    <table id="example" class="layui-table lay-even" data-name="productCommentData" data-tplid="list-tpl">
        <thead>
        <tr>
            <th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check"
                                  lay-skin="primary"></th>
            <th>产品编号</th>
            <th>品名(规格)</th>
            <th>图片</th>
            <th>重量(克)</th>
            <th>单价(元)</th>
            <th>数量(个)</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.list, function(index, item){ }}
        <tr>
            <td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td>
            <td>{{ item.product_no }}</td>
            <td>{{ item.product_name }}({{item.sku_name}})</td>
            <td>
                <div class="layer-photos-demo">
                    <img layer-src="/education{{ item.product_image }}"  src="/education{{ item.product_image }}"
                         onclick="viewImg();"
                         style="height:60px;"  alt="图片">
                </div>
            </td>
            <td>{{ item.product_weight}} g</td>
            <td class="edit" data-list='{"key":"id={{ item.id}}","filed":"product_price","render":"true"}'
                data-params='{"url":"/education/admin/orderItem/updatePrice/{{item.id}}", "data":"id={{ item.id}}" }'>
                {{ item.pay_price||item.product_price }}
            </td>
            <td>{{ item.amount }}</td>
            <td>
                <!--<button class="layui-btn layui-btn-mini"
                        onclick="_edit('{{item.id}}','{{item.product_no}}','{{item.product_price}}','{{item.amount}}');">编辑
                </button>-->
                <button class="layui-btn layui-btn-mini layui-btn-danger ajax"
                        data-list='{"key":"id={{ item.id}}","msg":true,"render":"true","action":"del"}'
                        data-params='{"url": "/education/admin/orderItem/delete/{{item.id}}","data":"", "method":"post", "confirm":"true"}'>
                    <i class="iconfont">&#xe626;</i>删除
                </button>
            </td>
        </tr>
        {{# }); }}
        </tbody>

    </table>
</script>
<script src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../js/lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/lib/rest.js"></script>
<script type="text/javascript" src="../../jsfile/jquery/jquery.form.js"></script>
<script type="text/javascript" src="../js/lib/bootstrap.autocomplete.js"></script>

<!--#include file="common/version.html"-->
<script>
    //layui.use('user_list');
    layui.use(['jquery', 'dtable','jqform'], function(exports) {
        var $ = layui.jquery,
            list = layui.dtable,
            form = layui.jqform,
            oneList = new list();
        form.set({
            "change": true,
            "form": "#form1"
        }).init(oneList);

        var url = "/education/admin/orderItem?_query.orderId=" + getQueryString('orderId');

        $('#list-tpl').attr('data-params',
            '{"url":"'+url+'","dataName":"orderItemData","pageid":"#page", "method":"post"}');
        oneList.init('list-tpl');

    });


    /*
    选择产品
     */
/*    $(function(){
        $('#autocompleteInput').autocomplete({
            source:function(query,process){
                var matchCount = this.options.items;//返回结果集最大数量
                $.post("/education/admin/product/query",{"keyword":query},function(respData){
                    console.log(respData);
                    if(respData.code == 200) {
                        return process(respData.data);
                    }
                });
            },
            formatItem:function(item){
                var name = item["product_name"] || '';
                var username = item["product_no"] || '';
                return name +"("+ username + ")";
            },
            setValue:function(item){
                return {'data-value':item["product_name"],'real-value':item["id"] + '-' + item['price'], };
            },
            afterSelect: function (v, rv) {
                var pid = rv.split('-')[0];
                var price = rv.split('-')[1];
                $('#pid').val(pid);
                $('#price').val(price);
            }
        });
    });*/

    function viewImg() {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.photos({
                photos: '.layer-photos-demo'
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });
    }

    function beforeAdd(obj){
        $('.imgbox').children().remove();
        $('#form1').attr('action', '/education/admin/orderItem/save');
    }

    $(function () {
        $('#orderId').add('#qOrderId').val(getQueryString('orderId'));
    });
    function submitForm() {
        restInsert($('#form1').attr('action'), {}, $('#form1'), function (rs) {
            if(rs.status == 200){
                layer.close(layer.index);
                layer.closeAll('page'); //关闭所有页面层
                layer.msg('操作成功');
                $('#search').trigger('click')
            } else {
                layer.msg(rs.msg);
            }
        })
    }

    function showLayer(type) {
        $('#form1')[0].reset();
        $('#orderId').val(getQueryString('orderId'));
        layer.open({
            type: 1,
            content: $('.add-subcat'),
            area:['400px'],
            title: type == 1 ?'添加':'修改'
        });
    }

    function _add() {
        $('#form1').attr('action', '/education/admin/orderItem/save');
        $('input[name=product_no]').removeAttr("readonly");
        showLayer(1);
    }
    function _edit(id, pno, price, amount) {
        $('#form1').attr('action', '/education/admin/orderItem/update');
        showLayer(2);
        $('input[name=id]').val(id);
        $('input[name=product_no]').val(pno).attr("readonly",true);
        $('input[name=product_price]').val(price);
        $('input[name=amount]').val(amount);
    }
</script>

</html>